<template>
	<view class="container">
		<camera :device-position="isFront ? 'front' : 'back'" flash="off" @error="initCameraError" :style="[cameraStyle]">
			<cover-image src="../../static/images/frame_1.png"></cover-image>
		</camera>
		<cover-view  v-if="imageSrc" class="photo-dialog">
			<cover-image :style="[cameraStyle]" :src="imageSrc"></cover-image>
			<button @click="saveImageToPhotosAlbum">保存到相册</button>
			<button @click="imageSrc = null">重新拍摄</button>
			<button @click="shareImage">分享好友</button>
		</cover-view>
		<button @click="isFront = !isFront">切换摄像头</button>
		<button type="primary" @click="takePhoto">拍照</button>
		<canvas canvas-id="firstCanvas" :style="[canvasStyle]"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ctx: null,
				camera: null,
				isFront: true, // 默认开启前置摄像头
				windowWidth: 375,
				imageSrc: null,
				tempFilePath: null
			}
		},
		computed: {
			cameraStyle() {
				return {
					width: '100%',
					height: '450px'
				}
			},
			canvasStyle() {
				return {
					width: '100%',
					height: '450px',
					position: 'absolute',
					left: this.windowWidth+'px',
					top: 0
				}
			}
		},
		onLoad() {
			this.windowWidth = uni.getSystemInfoSync().windowWidth
		},
		onReady() {
			// 创建canvas上下文
			this.ctx = uni.createCanvasContext('firstCanvas')
			this.ctx.setFillStyle('red')
			this.ctx.fillRect(0, 0, this.windowWidth, 450)
			this.ctx.draw()
		},
		methods: {
			// 绘制图像到画布
			drawImage(src) {
				this.ctx.drawImage(src, 0, 0, this.windowWidth, 450)
				this.ctx.drawImage('../../static/images/frame_1.png', 0, 0, this.windowWidth, 450)
				this.ctx.draw()
			},
			// 生成canvas图片
			canvasToTempFilePath() {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					canvasId: 'firstCanvas',
					success: res => {
						console.log(res)
						this.tempFilePath = res.tempFilePath
						this.imageSrc = res.tempFilePath
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			// 保存到相册
			saveImageToPhotosAlbum () {
				uni.saveImageToPhotosAlbum({
					filePath: this.tempFilePath,
					success: res => {
						console.log(res)
						uni.showToast({
							title: '图片已保存',
							icon: 'success',
							duration: 1000
						})
					},
					fail: err => {
						console.log(err)
						uni.showToast({
							title: '保存失败',
							icon: 'error',
							duration: 1000
						})
					}
				})
			},
			// 分享好友
			shareImage () {
				wx.showShareImageMenu({
				    path: this.tempFilePath
				})
			},
			// 拍照
			takePhoto() {
				const ctx = uni.createCameraContext()
				ctx.takePhoto({
					quality: 'high',
					success: res => {
						this.drawImage(res.tempImagePath)
						this.canvasToTempFilePath()
					},
					fail: err => {
						console.log(err)
						uni.showToast({
							title: '拍照失败',
							icon: 'error',
							duration: 1000
						})
					}
				})
			},
			// 初始化相机失败
			initCameraError(e) {
				console.log(e.detail)
				uni.showToast({
					title: '相机error',
					icon: 'error',
					duration: 1000
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.photo-dialog {
			width: 100%;
			height: 100vh;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1000;
		}
	}
</style>
